import React, { useState } from 'react'
import { 
  TrendingUp, 
  BarChart3, 
  Target,
  Brain,
  Lightbulb,
  Download,
  Settings,
  Plus
} from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, AreaChart, Area } from 'recharts'

const AnalyticsMain = () => {
  const [activeTab, setActiveTab] = useState('overview')

  // Mock数据
  const analyticsData = {
    insights: 24,
    predictions: 8,
    accuracy: 94.2,
    trends: 12,
    change: +15.3
  }

  const trendData = [
    { month: '1月', esg: 82, carbon: 1200, compliance: 96, prediction: 83 },
    { month: '2月', esg: 83, carbon: 1180, compliance: 97, prediction: 84 },
    { month: '3月', esg: 84, carbon: 1150, compliance: 97, prediction: 85 },
    { month: '4月', esg: 85, carbon: 1120, compliance: 98, prediction: 86 },
    { month: '5月', esg: 86, carbon: 1100, compliance: 98, prediction: 87 },
    { month: '6月', esg: 87, carbon: 1080, compliance: 99, prediction: 88 }
  ]

  const insights = [
    {
      id: 1,
      title: '碳排放趋势预测',
      description: '基于历史数据分析，预计Q3碳排放将下降8-12%',
      type: 'prediction',
      confidence: 92,
      impact: 'high'
    },
    {
      id: 2,
      title: 'ESG评分提升机会',
      description: '社区关系维度存在显著提升空间，建议加强投入',
      type: 'insight',
      confidence: 88,
      impact: 'medium'
    },
    {
      id: 3,
      title: '合规风险预警',
      description: '数据保护合规检查发现潜在风险点',
      type: 'risk',
      confidence: 95,
      impact: 'high'
    }
  ]

  const predictions = [
    {
      id: 1,
      metric: 'ESG综合评分',
      current: 85.6,
      predicted: 88.2,
      timeframe: '3个月',
      confidence: 92
    },
    {
      id: 2,
      metric: '碳足迹总量',
      current: 1234,
      predicted: 1150,
      timeframe: '6个月',
      confidence: 88
    },
    {
      id: 3,
      metric: '合规率',
      current: 98.2,
      predicted: 99.1,
      timeframe: '12个月',
      confidence: 95
    }
  ]

  const tabs = [
    { id: 'overview', name: '概览', icon: BarChart3 },
    { id: 'insights', name: '洞察', icon: Lightbulb },
    { id: 'predictions', name: '预测', icon: Brain },
    { id: 'trends', name: '趋势', icon: TrendingUp }
  ]

  const getImpactColor = (impact) => {
    switch (impact) {
      case 'high': return 'text-red-600 bg-red-50'
      case 'medium': return 'text-yellow-600 bg-yellow-50'
      case 'low': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getTypeColor = (type) => {
    switch (type) {
      case 'prediction': return 'text-blue-600 bg-blue-50'
      case 'insight': return 'text-green-600 bg-green-50'
      case 'risk': return 'text-red-600 bg-red-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">数据分析</h1>
          <p className="text-gray-600">AI驱动的数据分析和洞察</p>
        </div>
        <div className="flex items-center space-x-3">
          <button className="btn-outline flex items-center space-x-2">
            <Download className="w-4 h-4" />
            <span>导出分析</span>
          </button>
          <button className="btn-primary flex items-center space-x-2">
            <Plus className="w-4 h-4" />
            <span>新建分析</span>
          </button>
        </div>
      </div>

      {/* 标签页导航 */}
      <div className="border-b border-gray-200">
        <nav className="flex space-x-8">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm ${
                  activeTab === tab.id
                    ? 'border-orange-500 text-orange-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <Icon className="w-4 h-4" />
                <span>{tab.name}</span>
              </button>
            )
          })}
        </nav>
      </div>

      {/* 概览标签页 */}
      {activeTab === 'overview' && (
        <div className="space-y-6">
          {/* KPI卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">AI洞察</p>
                  <div className="flex items-baseline space-x-2">
                    <p className="text-2xl font-bold text-gray-900">{analyticsData.insights}</p>
                    <p className="text-sm text-gray-500">个</p>
                  </div>
                </div>
                <div className="p-3 bg-orange-50 rounded-lg">
                  <Lightbulb className="w-6 h-6 text-orange-600" />
                </div>
              </div>
              <div className="mt-4 flex items-center">
                <TrendingUp className="w-4 h-4 text-green-500" />
                <span className="ml-1 text-sm font-medium text-green-600">
                  +{analyticsData.change}%
                </span>
                <span className="ml-2 text-sm text-gray-500">vs 上月</span>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">预测模型</p>
                  <div className="flex items-baseline space-x-2">
                    <p className="text-2xl font-bold text-gray-900">{analyticsData.predictions}</p>
                    <p className="text-sm text-gray-500">个</p>
                  </div>
                </div>
                <div className="p-3 bg-blue-50 rounded-lg">
                  <Brain className="w-6 h-6 text-blue-600" />
                </div>
              </div>
              <div className="mt-4">
                <div className="text-sm text-gray-500">活跃预测模型</div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">预测准确率</p>
                  <div className="flex items-baseline space-x-2">
                    <p className="text-2xl font-bold text-gray-900">{analyticsData.accuracy}%</p>
                  </div>
                </div>
                <div className="p-3 bg-green-50 rounded-lg">
                  <Target className="w-6 h-6 text-green-600" />
                </div>
              </div>
              <div className="mt-4">
                <div className="text-sm text-gray-500">模型预测准确率</div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">趋势识别</p>
                  <div className="flex items-baseline space-x-2">
                    <p className="text-2xl font-bold text-gray-900">{analyticsData.trends}</p>
                    <p className="text-sm text-gray-500">个</p>
                  </div>
                </div>
                <div className="p-3 bg-purple-50 rounded-lg">
                  <TrendingUp className="w-6 h-6 text-purple-600" />
                </div>
              </div>
              <div className="mt-4">
                <div className="text-sm text-gray-500">识别关键趋势</div>
              </div>
            </div>
          </div>

          {/* 图表区域 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 趋势预测图 */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">ESG趋势预测</h3>
              <ResponsiveContainer width="100%" height={300}>
                <LineChart data={trendData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Line type="monotone" dataKey="esg" stroke="#3b82f6" strokeWidth={2} name="实际ESG评分" />
                  <Line type="monotone" dataKey="prediction" stroke="#8b5cf6" strokeWidth={2} strokeDasharray="5 5" name="预测ESG评分" />
                </LineChart>
              </ResponsiveContainer>
            </div>

            {/* 预测准确率 */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">预测准确率分析</h3>
              <ResponsiveContainer width="100%" height={300}>
                <AreaChart data={trendData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Area type="monotone" dataKey="esg" stroke="#10b981" fill="#10b981" fillOpacity={0.3} name="实际值" />
                  <Area type="monotone" dataKey="prediction" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.3} name="预测值" />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </div>

          {/* 最新洞察 */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-gray-900">最新AI洞察</h3>
              <button className="text-sm text-blue-600 hover:text-blue-700">查看全部</button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {insights.map((insight) => (
                <div key={insight.id} className="p-4 border border-gray-200 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(insight.type)}`}>
                      {insight.type === 'prediction' ? '预测' : 
                       insight.type === 'insight' ? '洞察' : '风险'}
                    </span>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${getImpactColor(insight.impact)}`}>
                      {insight.impact === 'high' ? '高影响' : 
                       insight.impact === 'medium' ? '中影响' : '低影响'}
                    </span>
                  </div>
                  <h4 className="font-medium text-gray-900 mb-2">{insight.title}</h4>
                  <p className="text-sm text-gray-600 mb-3">{insight.description}</p>
                  <div className="flex items-center justify-between text-xs text-gray-500">
                    <span>置信度: {insight.confidence}%</span>
                    <button className="text-blue-600 hover:text-blue-700">查看详情</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 洞察标签页 */}
      {activeTab === 'insights' && (
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold text-gray-900">AI洞察分析</h3>
              <div className="flex items-center space-x-3">
                <button className="btn-outline flex items-center space-x-2">
                  <Settings className="w-4 h-4" />
                  <span>分析设置</span>
                </button>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>生成洞察</span>
                </button>
              </div>
            </div>
            
            <div className="space-y-6">
              {insights.map((insight) => (
                <div key={insight.id} className="p-6 border border-gray-200 rounded-lg">
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="text-lg font-medium text-gray-900">{insight.title}</h4>
                    <div className="flex items-center space-x-2">
                      <span className={`px-3 py-1 text-sm font-medium rounded-full ${getTypeColor(insight.type)}`}>
                        {insight.type === 'prediction' ? '预测分析' : 
                         insight.type === 'insight' ? '数据洞察' : '风险预警'}
                      </span>
                      <span className={`px-3 py-1 text-sm font-medium rounded-full ${getImpactColor(insight.impact)}`}>
                        {insight.impact === 'high' ? '高影响' : 
                         insight.impact === 'medium' ? '中影响' : '低影响'}
                      </span>
                    </div>
                  </div>
                  
                  <p className="text-gray-600 mb-4">{insight.description}</p>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
                    <div>
                      <p className="text-sm text-gray-600">置信度</p>
                      <p className="text-xl font-bold text-blue-600">{insight.confidence}%</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">影响程度</p>
                      <p className="text-xl font-bold text-orange-600">
                        {insight.impact === 'high' ? '高' : 
                         insight.impact === 'medium' ? '中' : '低'}
                      </p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">生成时间</p>
                      <p className="text-xl font-bold text-gray-900">2小时前</p>
                    </div>
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
                        查看详细分析
                      </button>
                      <button className="text-green-600 hover:text-green-700 text-sm font-medium">
                        应用建议
                      </button>
                    </div>
                    <button className="text-gray-600 hover:text-gray-700 text-sm">
                      分享
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 预测标签页 */}
      {activeTab === 'predictions' && (
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold text-gray-900">预测模型</h3>
              <div className="flex items-center space-x-3">
                <button className="btn-outline flex items-center space-x-2">
                  <Settings className="w-4 h-4" />
                  <span>模型设置</span>
                </button>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>新建预测</span>
                </button>
              </div>
            </div>
            
            <div className="space-y-6">
              {predictions.map((prediction) => (
                <div key={prediction.id} className="p-6 border border-gray-200 rounded-lg">
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="text-lg font-medium text-gray-900">{prediction.metric}预测</h4>
                    <span className="text-sm text-gray-500">预测周期: {prediction.timeframe}</span>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
                    <div>
                      <p className="text-sm text-gray-600">当前值</p>
                      <p className="text-xl font-bold text-gray-900">{prediction.current}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">预测值</p>
                      <p className="text-xl font-bold text-blue-600">{prediction.predicted}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">置信度</p>
                      <p className="text-xl font-bold text-green-600">{prediction.confidence}%</p>
                    </div>
                  </div>
                  
                  <div className="w-full bg-gray-200 rounded-full h-3 mb-4">
                    <div 
                      className="bg-blue-500 h-3 rounded-full transition-all duration-300" 
                      style={{ width: `${prediction.confidence}%` }}
                    ></div>
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
                        查看模型详情
                      </button>
                      <button className="text-green-600 hover:text-green-700 text-sm font-medium">
                        更新预测
                      </button>
                    </div>
                    <span className="text-sm text-gray-500">
                      最后更新: 1小时前
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 趋势标签页 */}
      {activeTab === 'trends' && (
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">趋势分析</h3>
            <p className="text-gray-600 mb-6">基于历史数据识别关键趋势和模式</p>
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium text-gray-900 mb-4">ESG评分趋势</h4>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={trendData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="esg" stroke="#3b82f6" strokeWidth={2} name="ESG评分" />
                  </LineChart>
                </ResponsiveContainer>
                <div className="mt-4 p-4 bg-blue-50 rounded-lg">
                  <h5 className="font-medium text-blue-900 mb-2">趋势洞察</h5>
                  <p className="text-sm text-blue-800">
                    ESG评分呈现稳定上升趋势，预计未来3个月将继续提升2-3分
                  </p>
                </div>
              </div>

              <div>
                <h4 className="font-medium text-gray-900 mb-4">碳足迹趋势</h4>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={trendData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="carbon" stroke="#10b981" strokeWidth={2} name="碳足迹" />
                  </LineChart>
                </ResponsiveContainer>
                <div className="mt-4 p-4 bg-green-50 rounded-lg">
                  <h5 className="font-medium text-green-900 mb-2">趋势洞察</h5>
                  <p className="text-sm text-green-800">
                    碳足迹持续下降，减排措施效果显著，预计Q3将进一步降低
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default AnalyticsMain 